<template>
  <div>
    <head-top :headTitle="headTitle"></head-top>
    <div class="headtop"></div>
    <section class="c_nav">
      <div><span @click="changeShowType='zhongyao'" :class="{c_nav_active: changeShowType =='zhongyao'}">中药</span></div>
      <div><span @click="changeShowType='xiyao'" :class="{c_nav_active: changeShowType =='xiyao'}">西药</span></div>
      </section>
      <transition name="fade-choose">
        <section v-show="changeShowType =='zhongyao'" class="zhongyao">
            <section class="zhongyao_con">
                <div class="zhongyao_c_title">
                    <p>患者信息：{{$route.params.patientname}}{{$route.params.patientinfo}}</p>
                </div>
                <div class="zhongyao_c_content">
                    <ul>
                        <li v-for="item in dragList" :key="item.id">
                            <div class="zhongyao_y">{{item.DURGNAME}}</div>
                            <div class="zhongyao_c">
                                <i @click="adjustNumber(item.DURGID,'reduce')" class="iconfont icon-jian"></i>
                                <input v-model="item.DURGDJ" class="input_number">克
                                <i @click="adjustNumber(item.DURGID,'add')" class="iconfont icon-jia"></i>
                                <input type="button" value="删除" class="buttonRemove" @click="deleteDrag(item.COUNTNUM)">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zhongyao_c_footer">
                    <div class="searchList" v-show="showList">
                        <ul>
                            <li v-for="item in items" :key="item.COUNTNUM" @click="addDrag(item)"><p>{{item.DURGNAME}}&nbsp;&nbsp;&nbsp;&nbsp;规格：{{item.DURGGG}}<span v-html="item.drag_name"></span></p></li>
                        </ul>
                    </div>
                    <input type="text" placeholder="请输入中药名称关键字" class="input_name" v-model="dragKey" @input="getyaopin(dragKey)">
                    <input type="text" placeholder="份数" class="input_n" maxlength="3" v-model="durgSl">
                    <input type="text" placeholder="备注：" class="input_tip"  v-model="durgExplain">
                    <p><input type="button" value="开药方" class="input_search" @click="doPrescribe"></p>
                </div>
            </section>
        </section>
      </transition>
      <transition name="fade-choose">
        <section v-show="changeShowType =='xiyao'">
            <div class="zhongyao_c_title">
                   <p>患者信息：{{$route.params.patientname}}{{$route.params.patientinfo}}</p>
            </div>
            <div class="zhongyao_c_content">
                    <ul>
                        <li v-for="item in dragList" :key="item.COUNTNUM">
                            <div class="zhongyao_y">{{item.DURGNAME}}</div>
                            <div class="zhongyao_c">
                                <i @click="adjustNumber(item.DURGID,'reduce')" class="iconfont icon-jian"></i>
                                <input type="text" v-model="drugzl" class="input_number">克
                                <i @click="adjustNumber(item.DURGID,'add')" class="iconfont icon-jia"></i>
                                <input type="button" value="删除" class="buttonRemove" @click="deleteDrag(item.COUNTNUM)">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="zhongyao_c_footer">
                    <div class="searchList" v-show="showList">
                        <ul>
                            <li v-for="item in items2" :key="item.COUNTNUM" @click="addDrag(item)"><p>{{item.DURGNAME}}&nbsp;&nbsp;&nbsp;&nbsp;规格：{{item.DURGGG}}<span v-html="item.drag_name"></span></p></li>
                        </ul>
                    </div>
                    <input type="text" placeholder="请输入西药药品名称关键字" class="input_name" v-model="dragKey" @input="getyaopin2(dragKey)">
                    <input type="text" placeholder="份数" class="input_n" maxlength="3" v-model="durgSl">
                    <input type="text" placeholder="备注：" class="input_tip" v-model="durgExplain">
                    <p><input type="button" value="开药方" class="input_search" @click="doPrescribe2"></p>
                </div>
        </section>
      </transition>
      <transition name="tipMove">
      <alert-tip :alertText='alertText' v-if="showAlert" @closeTip="closeTip"></alert-tip>
      </transition>
  </div>
</template>
<script>
import headTop from "~/components/pagetwo/headTop";
import alertTip from "~/components/pagetwo/alertTip";

export default {
  data() {
    return {
      list: [],
      list2: [],
      ts: this.newStore(),
      headTitle: "开药方",
      durgExplain: "",
      changeShowType: "zhongyao",
      durgSl: "",
      dragKey: "",
      showList: false,
      ifDuplicate: false,
      alertText: "您的操作可能有问题",
      showAlert: false,
      dragList: []
    };
  },
  components: {
    headTop,
    alertTip
  },
  computed: {
    items: function() {
      /* 动态判断输入框是否为空，从而判断是否显示搜索的药物列表 */
      if (this.dragKey.length != 0) {
        this.showList = true;
      } else {
        this.showList = false;
      }
      return this.list;
    },
    items2: function() {
      /* 动态判断输入框是否为空，从而判断是否显示搜索的药物列表 */
      if (this.dragKey.length != 0) {
        this.showList = true;
      } else {
        this.showList = false;
      }
      return this.list2;
    }
  },
  methods: {
    adjustNumber(id, fn) {
      this.dragList.forEach(element => {
        if (element.DURGID == id) {
          if (fn == "add") {
            element.DURGDJ++;
          } else if (fn == "reduce") {
            element.DURGDJ--;
          }
        }
      });
    },
    getyaopin(dragKey) {
      
      var req = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.21",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            keyWord: dragKey,
            durgType: "1",
            rowsperpage: "20",
            pageno: "1",
            ordercolumn: "durgId",
            ordertype: "asc"
          }
        }
      });

      this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
        "": req
      }).then(ts => {
        this.list = ts.d.DATAOBJ.DATA;
      });
    },
    getyaopin2(dragKey) {
      var req = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.21",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            keyWord: dragKey,
            durgType: "2",
            rowsperpage: "20",
            pageno: "1",
            ordercolumn: "durgId",
            ordertype: "asc"
          }
        }
      });

      this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
        "": req
      }).then(ts => {
        this.list2 = ts.d.DATAOBJ.DATA;
      });
    },
    closeTip() {
      this.showAlert = false;
    },
    deleteDrag(COUNTNUM) {
      for (let i = 0; i < this.dragList.length; i += 1) {
        if (this.dragList[i].COUNTNUM == COUNTNUM) {
          this.dragList.splice(i, 1);
        }
      }
    },
    doPrescribe() {
      var res = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.19",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            doctorId: this.$root.doctorInfo.doctorId,
            patientId: this.$root.patientInfo.patientId,
            prescribeType: "1",
            prescribeExplain: this.durgExplain,
            prescribeNum: "15",
            je: "100",
            selectDurgList: [
              {
                durgId: "1",
                durgName: "中药药方",
                durgGg: "",
                durgGgName: "",
                durgSl: "",
                durgJe: "",
                durgDj: "",
                durgExplain: "吃法说明"
              },
            ]
          }
        }
      });
      this.showAlert = true;
      this.alertText = "您已提交中药药方！";
      (this.dragList = []),
        (this.dragKey = ""),
        (this.prescribeExplain = ""),
        (this.durgSl = ""),
        (this.durgExplain = ""),
        this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
          "": res
        });
    },
    doPrescribe2() {
      var res = JSON.stringify({
        OTRequest: {
          VERSION: "1.0",
          TN: "F27.APP.01.19",
          CLIENTID: "YLAPP",
          RYBID: "DOCTOR",
          TOKEN:
            "Ekzmrq5qIPxtYdlDKpLACV5vbxHsCfzJHnpOImO8qOj5ZngSq5kVFFTG5JQZjHf3",
          DATA: {
            doctorId: this.$root.doctorInfo.doctorId,
            patientId: this.$root.patientInfo.patientId,
            prescribeType: "2",
            prescribeExplain: this.durgExplain,
            prescribeNum: this.drugzl,
            je: this.durgSl,
            selectDurgList: [
              {
                durgId: "1",
                durgName: "西药药方",
                durgGg: "",
                durgGgName: "",
                durgSl: "",
                durgJe: "",
                durgDj: "",
                durgExplain: "吃法说明"
              }
            ]
          }
        }
      });
      this.showAlert = true;
      this.alertText = "您已提交西药药方！";
      (this.dragList = []),
        (this.dragKey = ""),
        (this.prescribeExplain = ""),
        (this.durgSl = ""),
        (this.durgExplain = ""),
        this.spost(this.ts, "/doctor/debug/AppMainServlet.ap", {
          "": res
        });
    },
    addDrag(item) {
      this.checkDrag(item);
      if (!this.ifDuplicate) {
        item.COUNTNUM = 10;
        item.COUNTNUM = (this.dragList.length + 1).toString();
        this.dragList.splice(0, 0, item);
      }
      this.ifDuplicate = false;
    },
    checkDrag(item) {
      this.dragList.forEach(e => {
        if (item.DURGID == e.DURGID) {
          this.showAlert = true;
          this.alertText = "不能重复添加相同药品";
          this.ifDuplicate = true;
        }
      });
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f1f1f1;
}
.headtop {
  background: #fff;
  height: 3rem;
}
.c_nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 1rem;
  border-bottom: 1px solid #ebebeb;
}
.c_nav_active {
  color: #3190e8;
  border-bottom: 2px solid #3190e8;
}
@keyframes tipMove {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.fade-choose-enter-active,
.fade-choose-leave-active {
  transition: opacity 0.2s;
}
.fade-choose-leave,
.fade-choose-leave-active {
  display: none;
}
.fade-choose-enter,
.fade-choose-leave-active {
  opacity: 0;
}
.zhongyao_c_title {
  border-bottom: 1px solid #cccccc;
}
.zhongyao_c_title p {
  font-size: 0.8rem;
  font-family: "Microsoft Yahei";
  color: #333;
  padding-top: 1rem;
}
.zhongyao_c_content {
  margin-top: 1rem;
  height: 13rem;
  overflow: auto;
}
.zhongyao_c_content ul li {
  list-style: none;
  font-size: 0.8rem;
  height: 2.5rem;
  width: 100%;
  overflow: hidden;
}
.zhongyao_y {
  font-family: "Microsoft Yahei";
  color: #333;
  float: left;
  width: 30%;
  overflow: auto;
}
.zhongyao_c {
  float: right;
}
.zhongyao_c i {
  padding: 0.7rem;
  font-size: 0.8rem;
}
.input_number {
  border: none;
  width: 20%;
  text-align: center;
  font-family: "Microsoft Yahei";
  color: #333;
}
.input_n {
  border: none;
  width: 18%;
  font-family: "Microsoft Yahei";
  color: #333;
  outline: none;
  height: 2rem;
  margin: 0 0.2rem;
}
.buttonRemove {
  width: 28%;
  border: none;
  float: right;
}
.zhongyao_c_footer {
  position: fixed;
  bottom: 3rem;
  text-align: center;
}
.input_name {
  border: none;
  width: 80%;
  text-align: center;
  font-family: "Microsoft Yahei";
  color: #333;
  outline: none;
  height: 2rem;
  margin-bottom: 0.2rem;
}
.input_tip {
  border: none;
  width: 24rem;
  font-family: "Microsoft Yahei";
  color: #333;
  outline: none;
  text-indent: 0.5rem;
  line-height: 2rem;
}
.input_search {
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  background: #3190e8;
  border: 1px solid #dcdfe6;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  font-weight: 500;
  padding: 0.6rem 2rem;
  border-radius: 4px;
  width: 100%;
}
.searchList {
  width: 100%;
  background: #fff;
  display: inline-block;
  overflow: auto;
  z-index: 100;
  height: 5.5rem;
}
.searchList ul {
  margin-bottom: 0;
}
.searchList ul li {
  font-size: 0.8rem;
  height: 2rem;
  border-bottom: 1px solid #ccc;
  line-height: 2rem;
  text-align: left;
  width: 100%;
  overflow: hidden;
}
</style>
